<template>
  <!-- 管理员页面 -->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <!-- 角色管理表格 -->
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search ||
              data.userName.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="用户账号" prop="userName"> </el-table-column>
        <el-table-column label="用户身份" prop="identity">
          <template slot-scope="scope">
            <p v-if="scope.row.identity == 1">管理员</p>
            <p v-else>普通用户</p>
          </template>
        </el-table-column>
        <el-table-column label="发布权限" prop="userAudit">
          <template slot-scope="scope">
            <el-tooltip
              :content="
                scope.row.userAudit == 'true'
                  ? '角色可以发布信息'
                  : '角色不能发布信息'
              "
              placement="top"
            >
              <el-switch
                v-model="scope.row.userAudit"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="true"
                inactive-value="false"
                @change="changeStatus($event, scope.row.userId)"
              >
              </el-switch>
            </el-tooltip>
            <!-- <el-tooltip :content="'角色可以发布信息 '" placement="top" v-if="scope.row.userAudit">
     <el-switch
    v-model="scope.row.userAudit"
    active-color="#13ce66"
    inactive-color="#ff4949">
  </el-switch>
</el-tooltip>
<el-tooltip :content="'角色不能发布信息' " placement="top" v-else>
      <el-switch
    v-model="scope.row.userAudit"
    active-color="#13ce66"
    inactive-color="#ff4949">
  </el-switch>
</el-tooltip>-->
          </template>
          <!-- <template slot-scope="scope">-->

          <!-- </template>  -->
          <!-- -->
        </el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <!-- 举报查看的禁用 -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleView(scope.$index, scope.row)"
              >查看用户举报信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 信息展示弹框 -->
      <el-dialog
        title="举报信息"
        :visible.sync="dialogTableVisible"
        width="80%"
      >
        <el-table :data="gridData" border>
          <!-- : "QQ:1474149552"
barterDesc: "寻物描述"
barterId: 1
barterImg: "
barterTitle: "寻物名称first"
barterType: "寻物"
barterValidDate: "2022-10-30 00:06:00"
jubao: "举报"
userId: 1
userName: "zs"   barterlist.barterId,barterImg,barterTitle,barterType,,,,barterjubao.userId,userName,jubao-->
          <el-table-column property="barterImg" label="图片" width="150">
            <template slot-scope="scope">
              <img
                :src="scope.row.barterImg"
                alt="暂无图片"
                srcset=""
                style="height: 100px; width: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column
            property="barterTitle"
            label="信息标题"
          ></el-table-column>
          <el-table-column
            property="barterType"
            label="信息分类"
          ></el-table-column>
          <el-table-column
            property="barterDesc"
            label="信息描述"
            width="200"
          ></el-table-column>
          <el-table-column
            property="barterValidDate"
            label="信息有效时间"
            width="200"
          ></el-table-column>
          <el-table-column
            property="barterContent"
            label="信息联系方式"
            width="200"
          ></el-table-column>
          <el-table-column property="userName" label="举报人"></el-table-column>
          <el-table-column property="jubao" label="举报内容"></el-table-column>
          <el-table-column fixed="right" label="操作" width="110">
            <!-- 举报查看的禁用 -->
            <template slot-scope="scope">
              <el-popconfirm
                title="请仔细核对该信息的所有举报信息，是否确认将信息状态更改为正常？"
                confirm-button-text="确认更改"
                cancel-button-text="核实其他举报信息"
                icon="el-icon-info"
                icon-color="red"
                @confirm="changeInfoAudit(scope.$index, scope.row)"
              >
                <el-button
                  size="mini"
                  type="success"
                  style="width: 78px"
                  slot="reference"
                  >更改状态</el-button
                >
                <!-- @click="changeInfoAudit(scope.$index, scope.row)" -->
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-tab-pane>
    <!-- <el-tab-pane label="其他内容的处理" name="second">其他内容的处理</el-tab-pane> -->
    <!-- 精选留言？ -->
    <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
  </el-tabs>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      // 表格
      tableData: [],
      search: "",
      // 详细信息弹框
      dialogTableVisible: false,
      gridData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取所有数据
    getData() {
      var that = this;
      axios({
        methods: "GET",
        url: "http://127.0.0.1:3000/admin/getAll",
      })
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            that.tableData = res.data.data;
          } else {
            console.log("error", res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeStatus: function ($event, userId) {
      let userAudit = $event;
      axios({
        methods: "GET",
        url: "http://127.0.0.1:3000/admin/updateAudit",
        params: {
          userAudit: userAudit,
          userId: userId,
        },
      })
        .then((res) => {
          console.log("发布权限已更改");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 表格
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 弹框
    handleView(index, row) {
      // selectJubao
      console.log(index, row);
      axios({
        methods: "GET",
        url: "http://127.0.0.1:3000/admin/selectJubao",
        params: {
          InfoPublisher: row.userName,
        },
      })
        .then((res) => {
          console.log("成功获取举报内容", res.data.data);
          this.gridData = res.data.data;
          this.dialogTableVisible = true;
        })
        .catch((err) => {
          console.log(err);
        });
      // this.dialogFormVisible = true;
      // console.log(item);
      // this.form = row;
      // console.log(this.form);
    },
    // 更改信息状态为正常
    changeInfoAudit(index, data) {
      if (data.barterType == "寻物" || data.barterType == "出物") {
        console.log(index, data);
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/admin/changeBarter",
          params: {
            infoId: data.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.dialogTableVisible = false;
            } else {
              this.$message.error("更改失败，请再次尝试");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (data.barterType == "代取") {
        console.log(index, data);
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/admin/changeTake",
          params: {
            infoId: data.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.dialogTableVisible = false;
            } else {
              this.$message.error("更改失败，请再次尝试");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log(data);
        axios({
          methods: "GET",
          url: "http://127.0.0.1:3000/admin/changeMessage",
          params: {
            infoId: data.barterId,
          },
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.dialogTableVisible = false;
            } else {
              this.$message.error("更改失败，请再次尝试");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>